<template>
  <div class="price-setting wap">
    <x-header v-if="!this.$fromApp(this)" :left-options="{backText: ''}"><span>价格设置</span></x-header>

    <div class="good-tip"><span>[{{brandName}}] {{name}} ({{spec}})</span></div>

    <div class="limit display-flex align-items-center justify-content-flex-justify">
      <span>订单限购数量</span>
      <input type="number" v-model.trim="limitNum">

      <div class="select" @click.stop="selectOperate">
        <img src="@/assets/img/cart/icon-select-active.png" v-if="selectStatus" class="icon" alt="">
        <img src="@/assets/img/cart/icon-select.png" v-else class="icon" alt="">
      </div>

      <input type="number" v-model.trim="limitDay">
      <span>天限购</span>
    </div>

    <div class="search">
      <div class="wrap display-flex align-items-center">
        <img src="@/assets/img/cart/icon-search.png" class="icon" alt="">
        <input type="text" placeholder="请输入客户分类查找价格" v-model.trim="keyword">
      </div>
    </div>

    <div class="price-container main">
      <scroller ref="scroll">

        <div class="item display-flex " v-for="(item,index) in list" :key="index">
          <div class="img-bg">
            <img v-if="item.customerCategoryType==0" class="icon-role" src="../../assets/img/customer/pifa.png" alt="">
            <img v-if="item.customerCategoryType==1" class="icon-role" src="../../assets/img/customer/lingshou.png"
                 alt="">
            <img v-if="item.customerCategoryType==9" class="icon-role" src="../../assets/img/customer/lingshou.png"
                 alt="">
          </div>

          <div class="flex-1">
            <div class="role-lable">{{item.customerCategoryName}} <span v-if="item.customerCategoryType==0"
                                                                        class="tip-red align-items-center">*</span>
            </div>
            <div class="content">
              <group>
                <flexbox :gutter="20" justify="center" align="center">
                  <flexbox-item v-for="(subItem,subIndex) in item.unitPriceList" :key="subItem.unitId">
                    <div class="display-flex align-items-center">
                      <span class="sell-credit-lable">{{subItem.unitName}}价格: </span>
                      <div class="vux-1px-b flex-1">
                        <input maxlength="11" class="my-weui-input" type="number" v-model="subItem.unitPrice"/>
                      </div>
                      <span class="sell-credit-lable">元</span>
                    </div>
                  </flexbox-item>
                  <!-- <flexbox-item>
                     <div class="display-flex">
                       <span class="sell-credit-lable">件价格:</span>
                       <div class="vux-1px-b flex-1">
                         <x-input></x-input>
                       </div>
                       <span class="sell-credit-lable">元</span>
                     </div>
                   </flexbox-item>-->
                </flexbox>

              </group>
            </div>
          </div>
        </div>
      </scroller>

    </div>

    <div class="checkBox">

      <div class="iconBox">
        <check-icon :value.sync="isCheck">商品询价</check-icon>
      </div>

    </div>


    <div v-if="showBtn" class="btn-comfirm  display-flex justify-content-flex-center align-items-center" v-btn-control
         @click="submitData($event)"><span>确认</span></div>


  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        list: [],
        immediately: 0,
        name: "",
        brandName: '',
        spec: '',
        showBtn: true,
        docmHeight: document.documentElement.clientHeight, //初始屏幕高度
        isCheck: false,
        selectStatus: false,
        limitNum: null,
        limitDay: null,
        keyword: '' // 搜索关键词
      }
    },
    created() {
      if (this.$route.query.immediately == 1) {
        this.immediately = 1;
      }
      this.name = decodeURIComponent(this.$route.query.name);
      this.brandName = decodeURIComponent(this.$route.query.brandName);
      this.spec = decodeURIComponent(this.$route.query.spec);
      this.initData();

    },
    watch: {
      keyword (nv, ov) { // 给匹配到的数据定位
        /*console.log(this.list)
        console.log(this.$refs.scroll.$el)*/
        var list = this.list
        var length = list.length
        var el = this.$refs.scroll.$el
        var index = 0
        for (let i = 0; i < length; i++) {
          if (list[i]['customerCategoryName'].indexOf(nv) != -1) {
            // console.log(el.childNodes[0])
            // console.log(i)
            index = i
            break
          }
        }
        // console.log(el.childNodes[0].style.background="red")
        el.childNodes[0].style.transform = `translate3d(0px, ${-(95*index)}px, 0px) scale(1)`
      }
    },
    mounted() {


      if (this.$platform() == 1) {
        window.onresize = () => {
          if (document.body.clientHeight < this.docmHeight) {
            this.showBtn = false
            if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
              setTimeout(function () {
                document.activeElement.scrollIntoViewIfNeeded();
              }, 100);
            }
          } else {
            this.showBtn = true

            document.getElementsByClassName("_v-container")[0].scrollTop = 0;
            //  document.getElementsByClassName("_v-content")[0].scroll(0, 0);
            // document.getElementsByClassName("main")[0].scroll(0, 0);
            // document.body.scrollTop=0;
            // document.body.scrollTop=0;
            //this.$vux.toast.text(  document.getElementsByClassName("_v-container")[0], 'center');
          }
        }
      }
    },
    methods: {
      selectOperate () {
        this.selectStatus = !this.selectStatus
      },
      initData() {
        this.$ajax.get("goods/price/list", (res) => {
          console.log("======res", res);
          if (res.code == 200) {
            this.list = res.data.categoryPrices;
            this.isCheck = res.data.enquiry == 1;
          } else {
            this.$vux.toast.text(res.msg, 'center');
          }
        }, {goodsId: this.$route.query.goodsId})
      },
      submitData(event) {
        if(event.target.disabled){
          return;
        }
        let arr = [];
        for (let i = 0; i < this.list.length; i++) {
          let obj = {
            "customerCategoryId": this.list[i].customerCategoryId,
            "unitPrices": [],
            "unitPriceList": [],
              "customerCategoryName":this.list[i].customerCategoryName,
              "customerCategoryType":this.list[i].customerCategoryType
          };
          if (this.list[i].unitPriceList) {
            for (let j = 0; j < this.list[i].unitPriceList.length; j++) {

              if (!this.isCheck && (this.list[i].unitPriceList[j].unitPrice || this.list[i].unitPriceList[j].unitPrice == '0')) {
                if (this.list[i].unitPriceList[j].unitPrice <= 0) {
                  this.$vux.toast.text("价格必须大于0", 'center');
                  return;
                }

                if (!(/^\d{1,8}$|^\d{1,8}[.]\d{1,2}$/).test(this.list[i].unitPriceList[j].unitPrice) || (99999999.9999999999 - this.list[i].unitPriceList[j].unitPrice) < 0) {
                  this.$vux.toast.text("整数部分最多8位，小数点最多两位", 'center');
                  return;
                }
              }


              if (!this.isCheck && (this.list[i].customerCategoryType == 0 && (this.list[i].unitPriceList[j].unitPrice == undefined || this.list[i].unitPriceList[j].unitPrice == null || this.list[i].unitPriceList[j].unitPrice == ''))) {
                this.$vux.toast.text(this.list[i].customerCategoryName + "价格必填", 'center');
                return;
              } else if (this.list[i].unitPriceList[j].unitPrice != undefined && this.list[i].unitPriceList[j].unitPrice != null && this.list[i].unitPriceList[j].unitPrice != '') {
                obj.unitPrices.push(this.list[i].unitPriceList[j]);
              }
              obj.unitPriceList=obj.unitPrices;
            }
          }

          if (obj.unitPrices.length > 0) {
            arr.push(obj);
          }
        }
        let opt = {
          "priceParams": arr,
          "enquiry": this.isCheck ? 1 : 0,
          "goodsId": this.$route.query.goodsId,
          "immediately": this.immediately,
          "limitNum": this.limitNum,
          "limitDay": this.limitDay
        }
        this.$ajax.post("goods/set/price", opt, (res) => {
          if (res.code == 200) {
            if (this.$fromApp(this)) {
              //this.$callJava({code: 1003, quick: true})
              this.$callJava({code: 1017,priceSetting:opt})
            } else {
              this.$router.go(-1)
            }
          } else {
            this.$vux.toast.text(res.msg, 'center');
          }
        }, 1)

      }
    }
  }
</script>

<style lang="less" type="text/less" scoped>
  .limit{
    font-size: 16px;
    color: #333333;
    background: #FFFFFF;
    padding: .3rem .2rem;
    font-weight: bold;
    input{
      width: 1.5rem;
      height: .6rem;
      border: 1px solid #e5e5e5;
      font-weight: normal;
      padding-left: 5px;
    }
  }
  .search{
    background: #F5F5F5;
    padding: .15rem .3rem;
    .wrap{
      width: 6.9rem;
      height: .6rem;
      border-radius: .25rem;
      background: #FFFFFF;
      padding: 0 .2rem;
      box-sizing: border-box;
    }
    input{
      border: none;
      outline: medium;
      margin-left: .15rem;
    }
  }
  .price-setting {
    background: #fff;
    .price-container {
      /*position: absolute;*/
      /*top:0;*/
      /*left: 0;*/
      /*right: 0;*/
      /*bottom: 100px;*/
    }
    .good-tip {
      padding: .2rem;
      font-size: .32rem;
      background: #f7f7f7;
      color: #666;
      font-weight: bold;
    }
    .tip-red {
      color: red;
    }
    .item {
      padding: .3rem;
      .my-weui-input {
        line-height: normal;
        text-align: center;
        outline: none;
        border: none;
        width: 100%;
        height: .8rem;
        font-size: .28rem;
      }
      .img-bg {
        position: relative;
        margin-top: 0.05rem;
        width: .44rem;
        height: .44rem;
        border: 1px solid #999;
        box-sizing: border-box;
        border-radius: 100%;
        text-align: center;
        .icon-role {
          width: .24rem;
          height: .24rem;
        }
      }
      .role-lable {
        font-size: .34rem;
        color: #222;
        margin-left: .2rem;
        font-weight: bold;
      }
      /deep/ .weui-cells {
        margin-top: 0;
      }
      /deep/ .weui-cells:before, /deep/ .weui-cells:after {
        border: none;
      }
      .content {
        margin-top: .3rem;
      }
    }
    .btn-comfirm {
      text-align: center;
      height: .92rem;
      background: #527DD9;
      border-radius: .46rem;
      color: #fff;
      font-size: .34rem;
      margin: 0 .3rem .3rem .3rem;
    }

    .checkBox {

      text-align: center;
      margin-bottom: .4rem;
      /deep/ .weui-icon-circle {
        width: 18px;
        height: 15px;
        color: #F5F5F5;
        background: #F5F5F5;
        border: 1px solid #BBBBBB;
        border-radius: 3px;
        -moz-border-radius: 3px;
        font-size: 12px;
        padding-top: 3px;
        &:before {
          content: "\EA08";
        }
      }
      /deep/ .vux-check-icon > span {
        color: #666666;
        margin-left: 3px;
        position: relative;
        top: 1px;
      }
      /deep/ .weui-icon-success {
        width: 18px;
        height: 15px;
        background: #4AC1A1;
        border: 1px solid #4AC1A1;
        border-radius: 3px;
        -moz-border-radius: 3px;
        font-size: 12px;
        padding-top: 3px;
        &:before {
          content: "\EA08";
          color: #FFFFFF;
        }
      }

    }
  }
</style>
